<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<div id="app">
    <div style="height:100px;width:100%;background-color:#00b7ea">
        <div style="height: 80px; width:80%;margin:auto;padding-top:10px">
            <h1 style="color: #ffffff;">541导航</h1>
            <ul id="nav" style="float: right;">
                <li><button>重新测速</button></li>
                <li><button>回到首页</button></li>
            </ul>
        </div>
    </div>

    <div style="width: 80%;margin:auto;margin-top:30px">
        <h1 style="color:#666666"><span style="color:#03a9f4">{{$messsage}}</span>线路选择</h2>
        <div id="lin">
            <div class="line_nav">
                <p style="width:30%">登录端口</p>
                <p style="width: 40%;">测速网址（点击网址进入)</p>
                <p style="width: 20%;">速度 （越小表示越快）</p>
            </div>
            
            <div class="line_nav" v-for='a in url'>
                <p style="width:30%" v-text='a.port'></p>
                <p style="width: 40%;"><a :href="a.url +':'+ a.port" v-text='a.url'></a></p>
                <!-- <p style="width: 20%;" :text='a.yc'></p> -->
                <input type="text" :value='a.yc'>
            </div>

        
        
        </div>
    </div>

    <button @click="console.log(url)">asd</button>
</div>




<script>
    Vue.prototype.$axios= axios;
    let app = new Vue({
        el:'#app',
        data(){
            return{
                url:'',

            }            
        },
        methods:{
            ping(data){
                let dates;
                let date;
                $.ajax({
                    type:"get",    //请求方式
                    async:true,    //是否异步
                    url:data.url,
                    dataType:"jsonp",    //跨域json请求一定是jsonp
                    jsonp: "callbackparam",    //跨域请求的参数名，默认是callback
                        //jsonpCallback:"successCallback",    //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串
                    data:{"query":"civilnews"},    //请求参数
                
                    beforeSend: function() {
                        //请求前的处理
                        date = new Date().getTime();
                    },
                
                    complete: function() {
                        
                        dates = new Date().getTime();
                        data.yc = dates-date;
                        //请求完成的处理
                    },
                });
            }
        },
        created(){
            this.url = {!! $url !!};
            //遍历结果
            for(let a in this.url){
                console.log(this.url);

                this.ping(this.url[a]);
            }
        }
    });



</script>












<style>

*{
    margin: 0;
    padding: 0;
}

#nav li{
    display: inline-block;
    width: 100px;
}


.line_nav{
    margin-top:20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dcdcdc;
    height: 30px;
}

.line_nav p{
    display: inline-block;
    padding: 0 10px;
    color:#666666
}

#lin{
    margin-top: 30px;
    border-radius: 10px;
    border:1px solid #dcdcdc;
    padding:10px;
}
</style>